<template>
  <div id="homePage">
    <div id="olMap" class=""></div>
    <a-modal :visible="tc1" :width="728" @cancel="closeFun()" :footer="null" class="zzonline_modal">
      <div class="zzListCointer">
        <div class="left1_title" style="position: relative">
          <span style="padding-left: 15px">详情</span>
          <span
            style="position: absolute; right: 15px; color: #fcff00; font-size: 17px; padding: 5px; cursor: pointer"
            @click="closeFun()"
            >X</span
          >
        </div>
        <div style="padding: 15px 25px">
          <p style="color: #ffffff">灌溉措施</p>
          <p style="color: #00ffff">{{ details.ggcs }}</p>
          <p style="color: #ffffff">施肥措施</p>
          <p style="color: #00ffff">{{ details.sfcs }}</p>
          <p style="color: #ffffff">植保措施</p>
          <p style="color: #00ffff">{{ details.zbcs }}</p>
        </div>
      </div>
    </a-modal>

    <a-modal :visible="tc2" :width="728" @cancel="closeFun()" :footer="null" class="zzonline_modal">
      <div class="zzListCointer" style="width: 100%">
        <div class="left1_title" style="position: relative">
          <span style="padding-left: 15px">墒情仪实时数据</span>
          <span
            style="position: absolute; right: 15px; color: #fcff00; font-size: 17px; padding: 5px; cursor: pointer"
            @click="closeFun()"
          >
            X
          </span>
        </div>
        <div style="padding: 15px 25px">
          <div style="display: flex">
            <p style="color: #ffffff; width: 115px">设备编号：</p>
            <p style="color: #00ffff">{{ mmeteRealTimeData.code }}</p>
          </div>
          <div style="display: flex">
            <p style="color: #ffffff; width: 115px">采集时间：</p>
            <p style="color: #00ffff">{{ mmeteRealTimeData.collectTime }}</p>
          </div>
          <div style="display: flex">
            <p style="color: #ffffff; width: 115px">10cm温度：</p>
            <p style="color: #00ffff">{{ mmeteRealTimeData.temp10 }}℃</p>
          </div>
          <div style="display: flex">
            <p style="color: #ffffff; width: 115px">10cm湿度：</p>
            <p style="color: #00ffff">{{ mmeteRealTimeData.humy10 }}%</p>
          </div>
          <div style="display: flex">
            <p style="color: #ffffff; width: 115px">20cm温度：</p>
            <p style="color: #00ffff">{{ mmeteRealTimeData.temp20 }}℃</p>
          </div>
          <div style="display: flex">
            <p style="color: #ffffff; width: 115px">20cm湿度：</p>
            <p style="color: #00ffff">{{ mmeteRealTimeData.humy20 }}%</p>
          </div>
          <div style="display: flex">
            <p style="color: #ffffff; width: 115px">30cm温度：</p>
            <p style="color: #00ffff">{{ mmeteRealTimeData.temp30 }}℃</p>
          </div>
          <div style="display: flex">
            <p style="color: #ffffff; width: 115px">30cm湿度：</p>
            <p style="color: #00ffff">{{ mmeteRealTimeData.humy30 }}%</p>
          </div>
          <div style="display: flex">
            <p style="color: #ffffff; width: 115px">40cm温度：</p>
            <p style="color: #00ffff">{{ mmeteRealTimeData.temp40 }}℃</p>
          </div>
          <div style="display: flex">
            <p style="color: #ffffff; width: 115px">40cm湿度：</p>
            <p style="color: #00ffff">{{ mmeteRealTimeData.humy40 }}%</p>
          </div>
          <div style="display: flex">
            <p style="color: #ffffff; width: 115px">50cm温度：</p>
            <p style="color: #00ffff">{{ mmeteRealTimeData.temp50 }}℃</p>
          </div>
          <div style="display: flex">
            <p style="color: #ffffff; width: 115px">50cm湿度：</p>
            <p style="color: #00ffff">{{ mmeteRealTimeData.humy50 }}%</p>
          </div>
        </div>
      </div>
    </a-modal>

    <div class="biaoti" style="z-index:100">
      <Date></Date>
      <div class="time">{{ nowTime }}</div>
      <ul class="ul1">
        <div class="dropdown">
          <a href="javascript:void(0)" class="button1">按钮1</a>
          <!--      <div class="dropdown-content">
            <a href="http://112.102.225.89:51000/farmingweb/#/index"
              >后台管理</a
            >
          </div> -->
        </div>
        <div class="dropdown">
          <a href="javascript:void(0)" class="button1">按钮2</a>
          <!--    <div class="dropdown-content">
            <a href="http://112.102.225.89:51000/farmingweb/#/index"
              >后台管理</a
            >
          </div> -->
        </div>
        <div class="dropdown">
          <a href="javascript:void(0)" class="title1"></a>
        </div>
        <div class="dropdown">
          <a href="javascript:void(0)" class="button2">按钮3</a>
          <div class="dropdown-content"></div>
        </div>
        <div class="dropdown">
          <a href="javascript:void(0)" class="button3">按钮4</a>
          <!--   <div class="dropdown-content">
            <a href="http://112.102.225.89:51007">后台系统</a>
          </div> -->
        </div>
      </ul>
    </div>

    <!-- 顶部按钮样式 -->
    <div class="buttonBox">
      <div class="content_center_top_module">
        <div class="content_center_top_module_icon jyl"></div>
        <div class="content_center_top_module_value">{{ topData.jyl }}</div>
        <div class="content_center_top_module_name">降雨量(mm)</div>
      </div>
      <div class="content_center_top_module">
        <div class="content_center_top_module_icon ggl"></div>
        <div class="content_center_top_module_value">{{ topData.ggl }}</div>
        <div class="content_center_top_module_name">灌溉量(㎡)</div>
      </div>
      <div class="content_center_top_module">
        <div class="content_center_top_module_icon sw"></div>
        <div class="content_center_top_module_value">{{ topData.yw }}</div>
        <div class="content_center_top_module_name">液位(mm)</div>
      </div>
      <div class="content_center_top_module">
        <div class="content_center_top_module_icon sw"></div>
        <div class="content_center_top_module_value">{{ topData.flow }}</div>
        <div class="content_center_top_module_name">流量(m³/s)</div>
      </div>
    </div>

    <!-- 左侧收起样式 -->
    <div
      class="left left1"
      :class="buttonBoxValue_4 || indexShow || indexShow2 ? 'box_animal_hide' : 'box_animal_show'"
    >
      地块信息
      <a-icon
        style="color: #4cadff"
        @click="changeBig(4)"
        type="right-circle"
        theme="filled"
        class="iconStyle"
      ></a-icon>
    </div>
    <div
      class="left left2"
      :class="buttonBoxValue_5 || indexShow || indexShow2 ? 'box_animal_hide' : 'box_animal_show'"
    >
      机井信息
      <a-icon
        style="color: #4cadff"
        @click="changeBig(5)"
        type="right-circle"
        theme="filled"
        class="iconStyle"
      ></a-icon>
    </div>
    <div
      class="left left3"
      :class="buttonBoxValue_6 || indexShow || indexShow2 ? 'box_animal_hide' : 'box_animal_show'"
    >
      墒情仪
      <a-icon
        style="color: #4cadff"
        @click="changeBig(6)"
        type="right-circle"
        theme="filled"
        class="iconStyle"
      ></a-icon>
    </div>
    <div
      class="left left4"
      :class="buttonBoxValue_10 || indexShow || indexShow2 ? 'box_animal_hide' : 'box_animal_show'"
    >
      闸门信息
      <a-icon
        style="color: #4cadff"
        @click="changeBig(10)"
        type="right-circle"
        theme="filled"
        class="iconStyle"
      ></a-icon>
    </div>
    <div class="left left3_new" :class="buttonBoxValue_3_new ? 'box_animal_hide' : 'box_animal_show'">
      摄像头
      <a-icon
        style="color: #4cadff"
        @click="changeBig_new(3)"
        type="right-circle"
        theme="filled"
        class="iconStyle"
      ></a-icon>
    </div>
    <!-- 左侧弹出样式 -->
    <div class="left_box left1_box left1" :class="buttonBoxValue_4 ? 'box_animal_show' : 'box_animal_hide'">
      <div class="left_content">
        <div class="left1_title">
          <span>
            <img class="titlle_icon" src="../../assets/homepage1/left1_icon.png" alt="" />
            地块信息
            <img class="titlle_icon_close" @click="changeBig(4)" src="../../assets/homepage1/closeIcon.png" alt="" />
            <div class="title_button">
              <span style="color: #fff">当前地块: &nbsp;</span>
              <select class="beautiful_select" @change="blockChange($event)">
                <option v-for="(item, index) in blockList" :key="item.id" :value="item.code">
                  {{ item.name }}
                </option>
              </select>
            </div>
          </span>
          <img class="title_line" src="../../assets/homepage1/title_line.png" alt="" />
        </div>
        <br />
        <div class="content_left_1_content">
          <div class="contentRow">
            <div class="contentRowModule">
              <div class="contentRowName">地块名称：</div>
              <div class="contentRowValue">{{ blockInfo.name }}</div>
            </div>
            <div class="contentRowModule">
              <div class="contentRowName">地块编号：</div>
              <div class="contentRowValue">{{ blockInfo.code }}</div>
            </div>
          </div>
          <div class="splitLine"></div>
          <div class="contentRow">
            <div class="contentRowModule">
              <div class="contentRowName">地块所属人：</div>
              <div class="contentRowValue">{{ blockInfo.userId }}</div>
            </div>
            <div class="contentRowModule">
              <div class="contentRowName">地块面积：</div>
              <div class="contentRowValue">{{ blockInfo.area }}<span class="dkmjUnit"></span></div>
            </div>
          </div>
          <div class="splitLine"></div>
          <div class="contentRow">
            <div class="contentRowModule">
              <div class="contentRowName">种植作物：</div>
              <div class="contentRowValue">{{ blockInfo.crops_dictText }}<span class="dkmjUnit"></span></div>
            </div>
            <div class="contentRowModule">
              <div class="contentRowName">种植品种：</div>
              <div class="contentRowValue">{{ blockInfo.variety }}<span class="dkmjUnit"></span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="left_box left4_box left4" :class="buttonBoxValue_10 ? 'box_animal_show' : 'box_animal_hide'">
      <div class="left_content">
        <!-- 左2饼图 -->
        <div class="left1_title">
          <span>
            <img class="titlle_icon" src="../../assets/homepage1/left4_icon.png" alt="" />
            闸门信息
            <img class="titlle_icon_close" @click="changeBig(10)" src="../../assets/homepage1/closeIcon.png" alt="" />
            <div class="title_button">
              <span style="color: #fff">共<b style="color: #fcff00">{{ gateList.length }}</b>条</span>
            </div>
          </span>
          <img class="title_line" src="../../assets/homepage1/title_line.png" alt="" />
        </div>
      </div>
      <div class="left2_list_new">
        <div class="list_title">
          <div class="list_title1 list_title_text"></div>
          <div class="list_title2 list_title_text">编号</div>
          <div class="list_title3 list_title_text">名称</div>
          <div class="list_title3 list_title_text">操作</div>
        </div>
        <div class="list_roll">
          <div v-for="(item, index) in gateList" class="sluice_list" :key="item.key">
            <a-radio
              :checked="item.radioValue"
              @change="selectedGate($event.target.checked, index, item.id)"
            ></a-radio>
            <span class="spanlist" style="width: 100px"> {{ item.code }}</span>
            <span class="spanlist" style="width: 100px">{{ item.name }}</span>
            <span class="spanlist" style="width: 100px; display: flex">
              <div class="sluice_list_but">
                <a-popconfirm
                  title="是否开闸"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="handleGateOk(item,100)"
                  @cancel="handleGateCancel"
                >
                  开闸
                </a-popconfirm>
              </div>
              <div class="sluice_list_but">
                <a-popconfirm
                  title="是否关闸"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="handleGateOk(item,0)"
                  @cancel="handleGateCancel"
                >
                  关闸
                </a-popconfirm>
              </div>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="left_box left2_box left2" :class="buttonBoxValue_5 ? 'box_animal_show' : 'box_animal_hide'">
      <div class="left_content">
        <div class="left1_title">
          <span>
            <img class="titlle_icon" src="../../assets/homepage1/left3_icon.png" alt="" />
            机井信息
            <img class="titlle_icon_close" @click="changeBig(5)" src="../../assets/homepage1/closeIcon.png" alt="" />
            <div class="title_button">
              <span style="color: #fff"
                >共<b style="color: #fcff00">{{ mpwellList.length }}</b
                >条</span
              >
            </div>
          </span>
          <img class="title_line" src="../../assets/homepage1/title_line.png" alt="" />
        </div>
        <div class="left2_list_new">
          <div class="list_title">
            <div class="list_title2 list_title_text">编号</div>
            <div class="list_title3 list_title_text">名称</div>
            <div class="list_title3 list_title_text">操作</div>
          </div>
          <div class="list_roll">
            <div v-for="item in mpwellList" class="sluice_list" :key="item.key">
              <span class="spanlist" style="width: 100px">{{ item.code }}</span>
              <span class="spanlist" style="width: 100px">{{ item.name }}</span>
              <span class="spanlist" style="width: 100px; display: flex">
                <div class="sluice_list_but">
                  <a-popconfirm
                    title="是否开泵"
                    ok-text="确定"
                    cancel-text="取消"
                    @confirm="handleMpwellOk(item, '开泵')"
                  >
                    开泵
                  </a-popconfirm>
                </div>
                <div class="sluice_list_but">
                  <a-popconfirm
                    title="是否关泵"
                    ok-text="确定"
                    cancel-text="取消"
                    @confirm="handleMpwellOk(item, '关泵')"
                  >
                    关泵
                  </a-popconfirm>
                </div>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="left_box left3_box left3" :class="buttonBoxValue_6 ? 'box_animal_show' : 'box_animal_hide'">
      <div class="left_content">
        <div class="left1_title">
          <span>
            <img class="titlle_icon" src="../../assets/homepage1/left2_icon.png" alt="" />
            墒情仪
            <img class="titlle_icon_close" @click="changeBig(6)" src="../../assets/homepage1/closeIcon.png" alt="" />
            <div class="title_button">
              <span style="color: #fff">共<b style="color: #fcff00">{{ mmeteList.length }}</b>条</span>
            </div>
          </span>
          <img class="title_line" src="../../assets/homepage1/title_line.png" alt="" />
        </div>

        <div class="left2_list_new">
          <div class="list_title">
            <div class="list_title2 list_title_text">编号</div>
            <div class="list_title3 list_title_text">名称</div>
             <div class="list_title3 list_title_text">归属</div>
            <div class="list_title3 list_title_text">操作</div>
          </div>
          <div class="list_roll">
            <div v-for="(item, index) in mmeteList" class="sluice_list" :key="item.key">
              <span class="spanlist" style="width: 80px">{{ item.code }}</span>
              <span class="spanlist" style="width: 80px">{{ item.name }}</span>
              <span class="spanlist" style="width: 70px">{{ item.sqyOwn_dictText }}</span>
              <span style="width: 80px; display: flex">
                <div class="sluice_list_but" @click="mmeteRealDataClick(item)">实时数据</div>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="left_box left_box_new left3_new" :class="buttonBoxValue_3_new ? 'box_animal_show' : 'box_animal_hide'">
      <div class="left_content">
        <div class="left1_title">
          <span>
            <img class="titlle_icon" src="../../assets/homepage1/left3_icon_new.png" alt="" />
            摄像头
            <img  class="titlle_icon_close"  @click="changeBig_new(3)"
              src="../../assets/homepage1/closeIcon.png" alt="" />
            <div class="title_button">
              <span style="color: #fff">共<b style="color: #fcff00">{{ cameraList.length }}</b>条</span>
            </div>
          </span>
          <img class="title_line" src="../../assets/homepage1/title_line.png" alt="" />
        </div>
      </div>
      <div class="left2_list_new">
        <div class="list_title">
          <div class="list_title2 list_title_text">编号</div>
          <div class="list_title3 list_title_text">名称</div>
          <div class="list_title3 list_title_text">序列号</div>
          <div class="list_title3 list_title_text">操作</div>
        </div>
        <div class="list_roll">
          <div v-for="(item, index) in cameraList" class="sluice_list" :key="item.key">
            <span class="spanlist" style="width: 80px">{{ item.code }}</span>
            <span class="spanlist" style="width: 80px">{{ item.name }}</span>
            <span class="spanlist" style="width: 70px">{{ item.squNum }}</span>
            <span style="width: 80px; display: flex">
              <div class="sluice_list_but" @click="showModalCamera(item)">查看监控</div>
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧收起样式 -->
    <div
      class="right right1"
      :class="buttonBoxValue_7 || indexShow || indexShow2 ? 'box_animal_hide' : 'box_animal_show'"
    >
      闸门
      <a-icon
        style="color: #4cadff"
        @click="changeBig(7)"
        :type="buttonBoxValue_7 ? 'right-circle' : 'left-circle'"
        theme="filled"
        class="iconStyle"
      ></a-icon>
    </div>
    <div
      class="right right2"
      :class="buttonBoxValue_8 || indexShow || indexShow2 ? 'box_animal_hide' : 'box_animal_show'"
    >
      用水知识
      <a-icon
        style="color: #4cadff"
        @click="changeBig(8)"
        :type="buttonBoxValue_8 ? 'right-circle' : 'left-circle'"
        theme="filled"
        class="iconStyle"
      ></a-icon>
    </div>
    <!-- 右侧弹出样式 -->
    <div class="right_box right1_box right1" :class="buttonBoxValue_7 ? 'box_animal_show' : 'box_animal_hide'">
      <div class="left_content">
        <div class="left1_title">
          <span>
            <img class="titlle_icon" src="../../assets/homepage1/left4_icon.png" alt="" />
            当前所选闸门
            <img
              class="titlle_icon_close"
              @click="changeBig(7)"
              src="../../assets/homepage1/closeIcon_right.png"
              alt=""
            />
          </span>
          <img class="title_line" src="../../assets/homepage1/title_line.png" alt="" />
        </div>
        <div class="content_right_zb_module_tit">
          <div>闸门编号: {{ selectGateData.code }}</div>
          <div>闸门名称：{{ selectGateData.name }}</div>
        </div>
        <div class="content_right_zb_module">
          <div class="zb_module">
            <div class="content_right_zb_module_icon zqsw"></div>
            <div class="content_right_zb_module_value">
              {{ realTimeGateData.currentOpen || '未知'}}
            </div>
            <div class="content_right_zb_module_name">闸门状态(开 | 关)</div>
          </div>
          <div class="zb_module">
            <div class="content_right_zb_module_icon zhsw"></div>
            <div class="content_right_zb_module_value">{{realTimeGateData.liquidLevel || '0.00'}}</div>
            <div class="content_right_zb_module_name">液位（mm）</div>
          </div>
          <div class="zb_module">
            <div class="content_right_zb_module_icon ll"></div>
            <div class="content_right_zb_module_value">{{ realTimeGateData.cumulatedFlow || '0.00' }}</div>
            <div class="content_right_zb_module_name">累计流量（m³/s）</div>
          </div>
          <div class="zb_module">
            <div class="content_right_zb_module_icon ll"></div>
            <div class="content_right_zb_module_value">{{ realTimeGateData.flowRate || '0.00' }}</div>
            <div class="content_right_zb_module_name">瞬时流量（m³/s）</div>
          </div>
        </div>
        <!-- 设备控制 -->
        <div class="content_right_bottom_module">
          <div class="content_right_bottom_module_icon"></div>
          <div class="content_right_bottom_module_content">
            <div class="sluiceNoModule">
              <div class="sluiceNoModuleName">设备控制：</div>
            </div>
            <div class="content_right_bottom_module_button">
              <div class="button_qd">
                <div class="button_qd_icon"></div>
                <div class="button_qd_name" @click="handleGateOk(selectGateData, 100)">开闸</div>
              </div>
              <div class="button_jt">
                <div class="button_jt_icon"></div>
                <div class="button_jt_name" @click="handleGateOk(selectGateData, 0)">关闸</div>
              </div>
              <div class="button_zdkz" @click="kaiduClick(selectGateData)">开度</div>
              <div class="button_gbfm" @click="getRealTimeGateData()">实时数据</div>
            </div>
          </div>
        </div>
        <div class="content_right_control_module">
          <div class="control_module" @click="controlChange('xsmx')">
            <div class="control_icon" :class="currentControl === 'xsmx' ? 'xsmx_icon_active' : 'xsmx_icon'"></div>
            <div :class="currentControl === 'xsmx' ? 'control_name_active' : 'control_name'">需水模型</div>
          </div>
          <div class="control_module" @click="controlChange('lssj')">
            <div class="control_icon" :class="currentControl === 'lssj' ? 'lssj_icon_active' : 'lssj_icon'"></div>
            <div :class="currentControl === 'lssj' ? 'control_name_active' : 'control_name'">历史数据</div>
          </div>
          <div class="control_module" @click="controlChange('czjl')">
            <div class="control_icon" :class="currentControl === 'czjl' ? 'czjl_icon_active' : 'czjl_icon'"></div>
            <div :class="currentControl === 'czjl' ? 'control_name_active' : 'control_name'">操作记录</div>
          </div>
        </div>
      </div>
    </div>
    <div class="right_box right2_box right2" :class="buttonBoxValue_8 ? 'box_animal_show' : 'box_animal_hide'">
      <div class="left_content">
        <div class="left1_title">
          <span>
            <img class="titlle_icon" src="../../assets/homepage1/jc.png" alt="" />
            用水知识
            <img
              class="titlle_icon_close"
              @click="changeBig(8)"
              src="../../assets/homepage1/closeIcon_right.png"
              alt=""
            />
            <div class="title_button">
              <span style="color: #fff"> 共有<b style="color: #fcff00">{{ rpkList.length }}</b>条</span>
            </div>
          </span>
          <img class="title_line" src="../../assets/homepage1/title_line.png" alt="" />
        </div>
        <div class="left2_list_new">
          <div class="list_title">
            <div class="list_title2 list_title_text">品种</div>
            <div class="list_title3 list_title_text">生育期</div>
            <div class="list_title3 list_title_text">时间</div>
            <div class="list_title3 list_title_text">操作</div>
          </div>
          <div class="list_rolls">
            <div v-for="(item, index) in rpkList" class="sluice_lists" :key="item.key">
              <span style="width: 120px">{{ item.pz }}</span>
              <span style="width: 120px">{{ item.jdm }}</span>
              <span style="width: 150px"> {{ item.beginTime }}~{{ item.endTime }}</span>
              <span style="width: 100px; display: flex">
                <div class="sluice_lists_but" @click="rpkDetailsClick(index)">查看详情</div>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 下方样式 -->
    <div class="bottom" :class="indexShow || indexShow2 ? 'box_animal_hide' : buttonBoxValue == '11' ? 'active' : ''">
      <div class="bottom-tl">图例说明</div>
      <a-icon
        v-if="buttonBoxValue != '11'"
        style="color: #4cadff"
        @click="changeBig(11)"
        type="up-circle"
        theme="filled"
        class="iconStyle_bottom"
      ></a-icon>
      <div v-if="buttonBoxValue == '11'">
        <a-icon
          style="color: #fcff00; font-size: 16px"
          @click="changeBig(11)"
          type="down-circle"
          theme="filled"
          class="bottom_date"
        ></a-icon>
        <div class="legendContent">
          <div class="legendContentModule">
            <div class="legendIcon legendIconNysz"></div>
            <div class="legendWord">水闸</div>
          </div>
          <div class="legendContentModule">
            <div class="legendIcon legendIconJj"></div>
            <div class="legendWord">机井</div>
          </div>
          <div class="legendContentModule">
            <div class="legendIcon legendIconSq"></div>
            <div class="legendWord">墒情仪器</div>
          </div>
          <div class="legendContentModule">
            <div class="legendIcon legendIconSp"></div>
            <div class="legendWord">摄像头</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 下方样式 结束-->

    <SluiceTraffic :visible="lsVisible" @close="lsCloseClick"></SluiceTraffic>
    <GateOperationRecord :visible="czVisible" @close="czCloseClick"></GateOperationRecord>
    <j-modal
      title="实时监控"
      switchFullscreen
      :visible="visible"
      :confirm-loading="confirmLoading"
      :width="850"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div id="video-container1" style="margin: 0 auto"></div>
    </j-modal>
    <a-modal
      title="设置开度"
      :visible="openVisible"
      :confirm-loading="openLoading"
      @ok="handleKaidu"
      @cancel="handleCancelKaidu"
    >
      设置水闸开度：<a-input-number v-model="kaiduForm.kaidu" />
    </a-modal>
    <!-- loading  -->
    <!-- <div class="sluiceLoading" v-if="sluiceLoading" style="z-index: 9999;"><a-spin :tip="LoadingMsg" ></a-spin>   </div> -->
    
  </div>
</template>

<script>
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import Date from '../../components/date/date.vue'
import SluiceTraffic from '@/views/components/intelligentIrrigation/sluiceTraffic'
import GateOperationRecord from '@/views/components/intelligentIrrigation/gateOperationRecord'
import dayjs from 'dayjs'
import moment from 'moment'
import { postAction, getAction } from '@/api/manage'

import { Tile as TileLayer } from 'ol/layer'
import XYZ from 'ol/source/XYZ'
import { defaults as defaultControls } from 'ol/control'
import Map from 'ol/Map.js'
import View from 'ol/View.js'
import { transform } from 'ol/proj' //将坐标从源投影转换为目标投影。这将返回一个新坐标（并且不会修改原始坐标）。

import { Vector as VectorSource } from 'ol/source'
import VectorLayer from 'ol/layer/Vector'
import {Fill,Stroke, Style, Icon ,Circle,Text } from 'ol/style'
import {getCenter } from 'ol/extent'
import { Point,Polygon } from 'ol/geom'
import Feature from "ol/Feature";


import gateImgPath from '../../assets/gate.png';
import mpwellImgPath from '../../assets/jijing.png';
import sqyImgPath from '../../assets/sqy.png';
import cameraImgPath from '../../assets/camera.png';

export default {
  name: 'homePage',
  components: {
    Date,
    SluiceTraffic,
    GateOperationRecord,
  },
  data() {
    return {
      map: null,
      blockLayer: null,
      deviceLayer:null,
      deviceIcons:[],
      
      
      selectGateData: {},
      realTimeGateData:{},

      blockList: [], //地块数据
      blockInfo:{},//当前所选地块
      blockName: "",//当前地块名称
      gateList: [], //闸门数据
      gateIndex: 0,//选中闸门的索引值
      mpwellList: [], //机井数据
      mmeteList: [], //墒情仪数据
      cameraList: [], //摄像头数据
      topData: {//顶部四个指标数据
        // 降雨量
        jyl: '3.002',
        // 灌溉量
        ggl: '3.002',
        // 水位
        yw: '3.002',
        //流量
        flow: '30',
      },
      
      rpkList:[],//水稻用水知识列表
      
      //数据记录
      currentControl: '',
      lsVisible: false,
      czVisible: false,
      
      //用水知识-查看详情
      tc1: false,
      details: [],
      //查看摄像头
      player1: null,
      visible: false,
      confirmLoading: false,
     
      //开度
      openVisible: false,
      openLoading: false,
      kaiduForm: {
        kaidu:'',
        zmbh:'',
      },
      
      //墒情仪实时数据
      tc2: false,
      mmeteRealTimeData:{},

      indexShow: false,
      indexShow2: false,
      
      
      buttonBoxValue: '14',
      buttonBoxValue_4: true,
      buttonBoxValue_5: true,
      buttonBoxValue_6: true,
      buttonBoxValue_7: true,
      buttonBoxValue_8: true,
      buttonBoxValue_9: true,
      buttonBoxValue_10: true,

      buttonBoxValue_1_new: true,
      buttonBoxValue_2_new: true,
      buttonBoxValue_3_new: true,
      buttonBoxValue_4_new: true,

      smallTitleActive: '',
      smallTitleActive1: true,
      smallTitleActive2: true,
      smallTitleActive3: true,
      smallTitleActive4: true,
      smallTitleActive5: true,

      nowTime: '',
    }
  },
  mounted() {
//     this.$message.config({
//         top: `200px`,
//     });
    this.initMap()
  },
  created() {
    //获取用水知识
    this.getRpkList();
    //获取地块数据
    this.getBlockList();
    
  },
  computed: {},
  methods: {
    /**
     * 初始化地图
     */
    initMap() {
      let centerLngLat = [118.29391, 25.3226] //暂时定位
      let centerLngPos = transform(centerLngLat, 'EPSG:4326', 'EPSG:3857')
      const view = new View({
        center: centerLngPos,
        zoom: 16, // 设置初始化显示层级
        minZoom: 6, // 最小显示层级
        maxZoom: 18, // 最大显示层级
      })
      const map = new Map({
        target: 'olMap',
        view: view,
        controls: defaultControls({
          zoom: true,
          attribution: false,
          rotate: false,
        }),
      })
      this.map = map
      // 添加底图
      let url = 'http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}'
      url = `${url}&T=img_w&tk=2d0985c08a0f5ab1cd093f12417baf2d`
      const source = new XYZ({
        url: url,
        projection: 'EPSG:3857',
      })
      const tdtLayer = new TileLayer({
        source: source,
      })
      this.map.addLayer(tdtLayer)
      // 添加注记
      url = 'http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}'
      url = `${url}&T=cia_w&tk=2d0985c08a0f5ab1cd093f12417baf2d`
      const sourceCIA = new XYZ({
        url: url,
        projection: 'EPSG:3857',
      })
      const tdtciaLayer = new TileLayer({
        source: sourceCIA,
      })
      this.map.addLayer(tdtciaLayer);

      //初始化地块图层
      this.initBlockLayer();
      //初始化设备图层
      this.initDeviceLayer();
      //初始化设备图标
      this.initDeviceIcons();
    },
    /**
     * 初始化地块图层
     */
    initBlockLayer() {
      //创建空的矢量容器(point)
      let vectorSource = new VectorSource({})
      //创建图标层
      this.blockLayer = new VectorLayer({
        source: vectorSource,
        zIndex: 30,
      })

      this.map.addLayer(this.blockLayer)
    },
    /**
     * 初始化设备图层
     */
    initDeviceLayer(){
      //创建空的矢量容器(point)
      let vectorSource = new VectorSource({})
      //创建图标层
      this.deviceLayer = new VectorLayer({
        source: vectorSource,
        zIndex: 30,
      })
      
      this.map.addLayer(this.deviceLayer)
    },
    initDeviceIcons(){
    	this.deviceIcons=[];
    	let icon1=new Icon({
    			anchor: [0.5, 60], //锚点
    			anchorOrigin: 'top-right', //锚点源
    			anchorXUnits: 'fraction', //锚点X值单位
    			anchorYUnits: 'pixels', //锚点Y值单位
    			offsetOrigin: 'top-right', //偏移原点
    			opacity: 0.9,
    			scale: 0.1, //图片缩放
    			src: gateImgPath,//
    		})
    	
    	let icon2=new Icon({
    			anchor: [0.5, 60], //锚点
    			anchorOrigin: 'top-right', //锚点源
    			anchorXUnits: 'fraction', //锚点X值单位
    			anchorYUnits: 'pixels', //锚点Y值单位
    			offsetOrigin: 'top-right', //偏移原点
    			opacity: 0.9,
    			scale: 0.1, //图片缩放
    			src: mpwellImgPath,
    		});
    	let icon3=new Icon({
    			anchor: [0.5, 60], //锚点
    			anchorOrigin: 'top-right', //锚点源
    			anchorXUnits: 'fraction', //锚点X值单位
    			anchorYUnits: 'pixels', //锚点Y值单位
    			offsetOrigin: 'top-right', //偏移原点
    			opacity: 0.9,
    			scale: 0.1, //图片缩放
    			src: sqyImgPath,
    		});
    	let icon4=new Icon({
    			anchor: [0.5, 60], //锚点
    			anchorOrigin: 'top-right', //锚点源
    			anchorXUnits: 'fraction', //锚点X值单位
    			anchorYUnits: 'pixels', //锚点Y值单位
    			offsetOrigin: 'top-right', //偏移原点
    			opacity: 0.9,
    			scale: 0.1, //图片缩放
    			src: cameraImgPath,
    		});
    	this.deviceIcons.push(icon1);
    	this.deviceIcons.push(icon2);
    	this.deviceIcons.push(icon3);
    	this.deviceIcons.push(icon4);
    },
    /**
     * 加载地块列表
     */
    getBlockList() {
      getAction('/wiis/block/list', {
        pageNo: 1,
        pageSize: 100,
      }).then((res) => {
        console.log('获取地块成功：', res)
        let { code, message, result, success } = res
        if (code == 200 && result) {
          this.blockList = result.records;
          if(this.blockList.length>0){
            this.blockInfo = this.blockList[0];
            this.blockName = this.blockInfo.name;
            this.drawBlock();
            this.getDeviceList()
          }
        }
      })
    },
    
    //画多边形-地块
    drawBlock(){
        let arrs = JSON.parse(this.blockInfo.zbxBh);//不加这句话 不好使。。。
        let polygon = new Polygon(arrs);
        polygon.transform("EPSG:4326", "EPSG:3857")
        let feature = new Feature(polygon);
        let lineStyle = new Style({
            fill: new Fill({
               color: 'rgba(255, 255, 255, 0.1)'
            }),
            stroke: new Stroke({
                color: '#3db4ff',
                width: 2
            }),
            zIndex: 70,
            text: new Text({
            	font: '13px Microsoft YaHei',
            	text: this.blockName,
            	fill: new Fill({
            		color: '#ffffff'
            	})
            }),
            image: new Circle({
            	radius: 7,
            	fill: new Fill({
            		color: '#3db4ff'
            	})
            })
        });
        // 添加线的样式
        feature.setStyle(lineStyle);
        // 添加线的fature
        this.blockLayer.getSource().addFeature(feature);
        //定位
        var center = getCenter(feature.getGeometry().getExtent());
        this.map.getView().setCenter(center); //设置当前地图的显示中心位置
    },
    /**
     * 加载设备列表
     */
    getDeviceList() {
      this.getGateList()
      this.getMpwellList()
      this.getMmeteList()
      this.getCameraList()
    },
    /**
     * 加载闸门列表
     */
    getGateList() {
      getAction('/wiis/gate/gateBlockList', {
        pageNo: 1,
        pageSize: 100,
        blockId: this.blockInfo.id,
      }).then((res) => {
        console.log('获取闸门成功：', res)
        let { code, message, result, success } = res
        if (success && result) {
          this.gateList = result.records;
          if(this.gateList.length>0){
              this.$set(this.gateList[0], 'radioValue', true);
              this.selectGateData=this.gateList[0];
              this.getRealTimeGateData();
              this.drawDevices(this.gateList,0,'gate'); //绘制闸门
          }
        }
      })
    },
    /**
     * 加载机井列表
     */
    getMpwellList() {
      getAction('/wiis/mpwell/mpwellBlockList', {
        pageNo: 1,
        pageSize: 100,
        blockId: this.blockInfo.id,
      }).then((res) => {
        console.log('获取机井成功：', res)
        let { code, message, result, success } = res
        if (success && result) {
          this.mpwellList = result.records
          this.drawDevices(this.mpwellkList,1,'mpwell'); //绘制机井
        }
      })
    },
    /**
     * 加载墒情仪列表
     */
    getMmeteList() {
      getAction('/wiis/mmete/mmeteBlockList', {
        pageNo: 1,
        pageSize: 100,
        blockId: this.blockInfo.id,
      }).then((res) => {
        console.log('获取墒情仪成功：', res)
        let { code, message, result, success } = res
        if (success && result) {
          this.mmeteList = result.records
          this.drawDevices(this.mmeteList,2,'mmete'); //绘制墒情仪
        }
      })
    },
    /**
     * 加载摄像头列表
     */
    getCameraList() {
      getAction('/wiis/camera/cameraBlockList', {
        pageNo: 1,
        pageSize: 100,
        blockId: this.blockInfo.id,
      }).then((res) => {
        console.log('获取摄像头成功：', res)
        let { code, message, result, success } = res
        if (success && result) {
          this.cameraList = result.records
          this.drawDevices(this.cameraList,3,'camera');//绘制摄像头
        }
      })
    },
    // 绘制坐标点
    addPoint(info) {
      let pos = [parseFloat(info.lng), parseFloat(info.lat)];
      pos = transform(pos, 'EPSG:4326', 'EPSG:3857');
      let feature = new Feature({
        title: 'beijing',
        geometry: new Point(pos),
      })
      feature.setStyle(
        new Style({
          image: new Circle({
            fill: new Fill({
              color: 'blue',
            }),
            radius: 4,
          }),
        })
      );
      let source = new VectorSource()
      source.addFeature(feature)
      let layer = new VectorLayer()
      layer.setSource(source)
      this.map.addLayer(layer)
    },
    /**
     * 绘制硬件设备
     * @param {Object} dataList
     * @param {Object} icon_index
     * @param {Object} flag
     */
    drawDevices(dataList,icon_index,flag) {
    	for (let i in dataList) {
    		let info = dataList[i];
    		let id = info.id;
    		let code = info.code;
    		let name = info.name;
    		let squNum=info.squNum || '';
    		let lng=info.lng;//经度
    		let lat=info.lat;//纬度
    		//我们一般用的比较多的是设置地图的中心点，所以使用的时候是将地理坐标转为投影坐标，如下所示。
    		//通常，数据存储在EPSG：4326中并显示在 EPSG：3857中。
    		let pos = [parseFloat(info.lng), parseFloat(info.lat)];
        pos = transform(pos, 'EPSG:4326', 'EPSG:3857');
    		let iconFeature = new Feature({
    			geometry: new Point(pos),
    			id: id,
    			code:code,
    			name: name, //名称属性
    			squNum:squNum,//摄像头序列号
    			flag:flag,
    			lng:lng,
    			lat:lat
    		});
    		//设置点要素样式
    		iconFeature.setStyle(this.createLabelStyle(iconFeature,icon_index));
    		
    		this.deviceLayer.getSource().addFeature(iconFeature);
    		
    	}
    },
    //矢量标注样式设置函数，设置image为图标ol.style.Icon
    createLabelStyle(feature,index) {
    	return new Style({
    		image: this.deviceIcons[index],
    		zIndex: 90,
    		text: new Text({
    			textAlign: 'center', //位置
    			textBaseline: 'middle', //基准线
    			font: 'normal 14px 微软雅黑', //文字样式
    			text: feature.get('code'), //文本内容feature.get('name')
    			fill: new Fill({ //文本填充样式（即文字颜色)
    				color: '#FFFFCC'
    			}),
    			// stroke: new ol.style.Stroke({
    			// 	color: '#F00',
    			// 	width: 2
    			// })
    		})
    	});
    },
    /**
     * 闸门勾选操作
     */
    selectedGate(e, index, dkid) {
      // console.log(e)
      // this.gateList[index]['radioValue'] = e;
      //之前选中的勾掉
      this.$set(this.gateList[this.gateIndex], 'radioValue', false);
      //设置新的选中
      this.$set(this.gateList[index], 'radioValue', e)
      // console.log(this.gateList)
      this.gateIndex = index;
      //获取闸门实时数据
      this.selectGateData=this.gateList[this.gateIndex];
      this.getRealTimeGateData();
    },
    /**
     * 获取闸门实时数据
     */
    getRealTimeGateData(){
      this.$loading.show('正在加载闸门实时数据...','bars');
      
      let gateInfo=this.selectGateData;
      this.realTimeGateData={};
      getAction(`/wiis/gateMonitor/getRealTimeData/${gateInfo.code}`, {}).then((res) => {
        console.log("获取闸门实时数据：",res);
        let { code, message, result, success } = res
        if (success && result) {
          
          this.$message.success("闸门接口提示："+res.message);
          
          this.realTimeGateData=res.result;
          //处理数据
          let currentOpen= this.realTimeGateData.currentOpen;
          if(currentOpen && currentOpen=='0'){
              this.realTimeGateData.currentOpen='关闭';
          }else{
              this.realTimeGateData.currentOpen='开启';
          }
        } else {
          this.$message.error({
            duration:3,
            content:"闸门接口提示："+res.message
          });
          console.error('error: : ', res)
        }
      }).finally(() => {
          this.$loading.hide();
      })
    },
    //地块选择
    blockChange(e) {
      // console.log(event);
      let selectIndex =event.target.selectedIndex;//选中的第几个option元素 从0开始
      // console.log(selectIndex)
      // var options = event.target.options;//代表option组合
      // console.log("options[selectIndex].innerHTML=="+options[selectIndex].innerHTML);
      // console.log("event.target.value=="+event.target.value);
      
      this.blockInfo = this.blockList[selectIndex];
      this.blockName = this.blockInfo.name;
      this.drawBlock();
      this.getDeviceList()
    },
    //设置顶部指标信息
    setTopInfo() {
      
    },
    
    /**
     * 加载水稻用水知识列表
     */
    getRpkList() {
      getAction('/wiis/rpk/indexList', {//自定义list方法，注意返回的result
        key: ''
      }).then((res) => {
        console.log('获取用水知识成功：', res)
        let { code, message, result, success } = res
        if (success && result) {
          this.rpkList = result;
        }
      })
    },
    //用水知识-查看详情
    rpkDetailsClick(index) {
      this.tc1 = true
      this.details = this.rpkList[index];
      // console.log(this.details)
    },
    //开关闸确认
    handleGateOk(record,openPercent) {
      console.log(record)
      const param = { addressCode: record.code, openPercent: openPercent};
      this.gateControl(param);
      
    },
    //闸门控制
    gateControl(param){
      this.$loading.show('正在执行命令...','bars');
      postAction('/wiis/gateMonitor/gateControl', param).then(res => {
        // console.log(res)
        if (res.success) {
          this.$message.success(res.message)
        } else {
         this.$message.error(res.message)
        }
      }).finally(() => {
        this.$loading.hide();
      })
    },
    //开关闸取消
    handleGateCancel(e) {
      
    },
    //开关泵确认
    handleMpwellOk(record, order) {
       const param = { functionCode:order};
       this.mpwellControl(param);
      
    },
    mpwellControl(param){
         this.$loading.show('正在执行命令...','bars');
         postAction('/wiis/mpwell/mpwellControl', param).then(res => {
          // console.log(res)
          if (res.success) {
              this.$message.success(res.message);
          }else{
              this.$message.error(res.message)
          }
        }).finally(() => {
            this.$loading.hide();
        })
    },
    //墒情仪实时数据
    mmeteRealDataClick(record) {
      this.tc2 = true
      this.mmeteRealTimeData={};
      this.$loading.show('正在执行命令...','bars');
      let url="";
      if(record.sqyOwn=='zky'){
        url='/wiis/mmeteMonitor/getEcoisRealTimeData/'+record.code;
      }else{
        url='/wiis/mmeteMonitor/getRealTimeData/'+record.code
      }
      getAction(url, {}).then((res) => {
        if (res.success) {
          // console.log(res);
          this.mmeteRealTimeData=res.result;
          
        } else {
          console.error('error: : ', res)
        }
      }).finally(() => {
        this.$loading.hide();
      })
    },
    //查看监控
    //弹出视频监控界面
    showModalCamera(record) {
      this.$loading.show('正在执行命令...','bars');
      getAction(`/wiis/cameraMonitor/getYingshiToken`, {})
        .then((res) => {
          if (res.success) {
            // console.log(res);
            this.visible = true
            let accessToken = res.result
            // console.log("萤石accessToken",accessToken);
            this.player1 = new EZUIKit.EZUIKitPlayer({
              //摄像头10
              id: 'video-container1',
              accessToken: accessToken,
              url: `ezopen://open.ys7.com/${record.squNum}/1.hd.live`,
              template: 'pcLive',
              plugin: ['talk'],
              width: 800,
              height: 600,
            })
          } else {
            console.error('error: : ', res)
          }
        })
        .finally(() => {
          this.$loading.hide();
        })
    },
    //视频监控 弹窗 确定
    handleOk(e) {
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        if (this.player1) {
          this.player1.stop();
          this.confirmLoading = false
        }
      }, 2000)
    },
    //视频监控 弹窗 取消
    handleCancel(e) {
      this.visible = false
      if (this.player1) {
        this.player1.stop()
      }
    },
    
    
    
    //数据记录
    controlChange(val) {
      if (val === 'lssj') {
        this.lsVisible = true
      }
      if (val === 'czjl') {
        this.czVisible = true
      }
      this.currentControl = val
    },
    lsCloseClick() {
      this.lsVisible = false
    },
    czCloseClick() {
      this.czVisible = false
    },
    
    
    
    
    //设置开度
    kaiduClick(record) {
      this.openVisible = true
      this.kaiduForm.zmbh = record.code;
    },
    //执行开度命令
    handleKaidu() {
     const param = { addressCode: this.kaiduForm.zmbh, openPercent: this.kaiduForm.kaidu};
     // console.log(param)
     if (!this.kaiduForm.kaidu) {
       this.$message.error('开度值错误!')
     }else{
        this.gateControl(param);
     }
     
     this.handleCancelKaidu();
    },
    handleCancelKaidu() {
      this.openVisible = false
      
      this.kaiduForm.zmbh="";
      this.kaiduForm.kaidu="";
    },

    itemTypeChange(type) {
      if (type == 1) {
        this.smallTitleActive1 = !this.smallTitleActive1
      } else if (type == 2) {
        this.smallTitleActive2 = !this.smallTitleActive2
      } else if (type == 3) {
        this.smallTitleActive3 = !this.smallTitleActive3
      } else if (type == 4) {
        this.smallTitleActive4 = !this.smallTitleActive4
      } else if (type == 5) {
        this.smallTitleActive5 = !this.smallTitleActive5
      }

      this.$refs.map.setLayerVisible(type)
    },
    async getdapenglsnew(id) {},
    async getdapengls(id) {},

    /*
      New
      联系方式弹窗关闭
    */
    closeFun() {
      this.$store.state.isShow = false
      this.tc1 = false
      this.tc2 = false
      this.tc3 = false
    },

    // 显示设备点击
    changeBig(value) {
      if (value >= 4 && value <= 10) {
        this.buttonBoxValue = '14'
        this.indexShow = false
        this[`buttonBoxValue_${value}`] = !this[`buttonBoxValue_${value}`]
      } else {
        if (value == 11) {
          if (this.buttonBoxValue != value) {
            this.buttonBoxValue = value
          } else {
            this.buttonBoxValue = '14'
          }
        } else if (value == 14) {
          if (this.buttonBoxValue != value) {
            this.buttonBoxValue = value
            this.itemTypeChange('1')
            this.itemTypeChange('2')
            this.itemTypeChange('3')
            this.itemTypeChange('4')
            this.itemTypeChange('5')
          } else {
            this.buttonBoxValue = '0'
            this.itemTypeChange('1')
            this.itemTypeChange('2')
            this.itemTypeChange('3')
            this.itemTypeChange('4')
            this.itemTypeChange('5')
          }
        } else {
          if (this.buttonBoxValue != value) {
            this.buttonBoxValue = value
            if (value == 1) {
              this.indexShow = true
              this.indexShow2 = false
              this.setAll_buttonBoxValue_false()
              this.echarts_1()
              this.echarts_2()
              this.echarts_3()
              this.echarts_4()
              this.echarts_5()
              this.echarts_6()
            }
            if (value == 2) {
              this.indexShow2 = false
              this.indexShow = false
              this.setAll_buttonBoxValue_true()
              this.buttonBoxValue = '14'
              // this.buttonBoxValue = '14';
            }
            if (value == 12) {
              this.indexShow2 = true
              this.indexShow = false
              this.setAll_buttonBoxValue_false()
            }
            if (value == 3) {
              this.indexShow = false
              this.indexShow2 = false
              this.zzModal1 = !this.zzModal1
              this.buttonBoxValue = '3'
            }
          } else {
            this.buttonBoxValue = '0'
            if (value == 3) {
              this.zzModal1 = false
            }
          }
        }
      }
    },
    changeBig_new(value) {
      this[`buttonBoxValue_${value}_new`] = !this[`buttonBoxValue_${value}_new`]
    },
    setAll_buttonBoxValue_false() {
      this.buttonBoxValue_4 = false
      this.buttonBoxValue_5 = false
      this.buttonBoxValue_6 = false
      this.buttonBoxValue_7 = false
      this.buttonBoxValue_8 = false
      this.buttonBoxValue_9 = false
      this.buttonBoxValue_10 = false
    },
    setAll_buttonBoxValue_true() {
      this.buttonBoxValue_4 = true
      this.buttonBoxValue_5 = true
      this.buttonBoxValue_6 = true
      this.buttonBoxValue_7 = true
      this.buttonBoxValue_8 = true
      this.buttonBoxValue_9 = true
      this.buttonBoxValue_10 = true
    },
  },
}
</script>
<style>
@import '../../assets/style/home.css';
</style>
<style lang="less" scoped>
.ant-form-item label {
  font-size: 100px;
}
#olMap {
  width: 100%;
  height: 130vh;
}
#homePage {
  width: 1920px;
  height: 1200px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  // background: url(../../assets/homepage1/bg1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.title {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 78px;
}

.buttonBox {
  height: 34px;
  position: absolute;
  top: 82px;
  left: calc(50% - 480px);
  display: flex;
  justify-content: space-around;
  z-index: 1;

  .button {
    transition: all ease-in-out 0.5s;
    width: 135px;
    height: 34px;
    background: url(../../assets/homepage1/buttonbg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
    letter-spacing: 0.3em;
  }

  .active {
    color: #00ffff;
  }
}

.buttonBox_right {
  width: 135px;
  height: 160px;
  position: absolute;
  top: 140px;
  right: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  z-index: 1;

  .button {
    transition: all ease-in-out 0.5s;
    width: 135px;
    height: 34px;
    background: url(../../assets/homepage1/buttonbg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
    letter-spacing: 0.3em;
    position: relative;

    .datePosition {
      position: absolute;
      width: 155px;
      height: 34px;
      border: 1px solid #2cadff;
      left: -156px;
      top: 0;
    }
  }

  .active {
    color: #00ffff;
  }
}

.buttonBox_right.active {
  right: 90px;
}

.left {
  position: absolute;
  left: 30px;
  width: 48px;
  font-size: 16px;
  color: #fff;
  writing-mode: tb;
  background: url(../../assets/homepage1/leftbg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  text-align: center;
  line-height: 48px;
  letter-spacing: 0.3em;
  text-indent: -1em;
  cursor: pointer;
}

.right {
  position: absolute;
  right: 30px;
  width: 48px;

  font-size: 16px;
  color: #fff;
  writing-mode: tb;
  background: url(../../assets/homepage1/rightbg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  text-align: center;
  line-height: 48px;
  letter-spacing: 0.3em;
  text-indent: -1em;
  cursor: pointer;
}

.left1 {
  top: 82px;
  height: 220px;
}

.left4 {
  top: calc(92px + 220px);
  height: 208px;
}

.left2 {
  top: calc(92px + 230px + 208px);
  height: 208px;
}

.left3 {
  top: calc(92px + 230px + 218px + 208px);
  height: 208px; // 920
}
.right1 {
  top: 82px;
  height: 660px;
}

.right2 {
  top: calc(92px + 660px);
  height: 430px;
}

.right3 {
  top: calc(92px + 270px + 260px);
  height: 290px;
}

.right1_new {
  top: 126px;
  height: 790px;
}

.right1_new_small {
  top: 126px;
  height: 260px;
}

.left1_new {
  top: 82px;
  height: 260px;
}

.left2_new {
  top: calc(92px + 260px);
  height: 260px;
}

.left3_new {
  top: calc(92px + 270px + 260px + 350px);
  height: 208px;
}
.iconStyle {
  font-size: 20px;
  position: absolute;
  bottom: 20px;
  left: calc(50% - 10px);
  color: '#4CADFF';
}

.bottom {
  position: absolute;
  bottom: 20px;
  width: 640px;
  height: 78px;
  left: calc(50% - 420px);
  padding: 6px;
  font-size: 16px;
  color: #fff;
  writing-mode: tb;
  background: url(../../assets/homepage1/bottombg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  text-align: center;
  letter-spacing: 0.3em;
  writing-mode: rl;
  cursor: pointer;
  transition: all ease-in-out 0.5s;
  overflow: hidden;

  .bottom-tl {
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(4deg, #18faff 1%, #fff 98%);
    font-size: 20px;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: 700;
  }
  .bottomEchart {
    width: 760px;
    height: 260px;
    margin: 10px auto;
  }

  .bottom_date {
    position: absolute;
    right: 10px;
    top: 27px;
  }
}

.bottom_butonList {
  position: absolute;
  left: calc(50% - 225px);
  bottom: 110px;
  height: 34px;
  width: 450px;
  z-index: 3;
  transition: all ease-in-out 0.5s;
  display: flex;
  justify-content: space-between;

  .buttonList_item {
    width: 137px;
    height: 34px;
    border: 1px solid #4cadff;
    color: #04eee0;
    font-size: 14px;
    text-align: center;
    margin-left: 30px;
    line-height: 34px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2);
  }

  .buttonList_item.active {
    background: url(../../assets/homepage1/buttonlistbg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border: none;
    color: #fff;
  }
}

.bottom_butonList.active {
  bottom: 392px;
}

.iconStyle_bottom {
  font-size: 20px;
  position: absolute;
  right: 30px;
  top: 20px;
  color: '#4CADFF';
}

.topRight {
  width: 508px;
  height: 47px;
  position: absolute;
  top: 68px;
  right: 63px;
  background: url(../../assets/homepage1/toprightbg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;

  img {
    width: 24px;
  }
}

.right_box {
  box-sizing: border-box;
  position: absolute;
  right: 30px;
  writing-mode: rl;
  overflow: hidden;
  transition: all ease-in-out 0.5s;
  z-index: 3;
}

.right1_box {
  width: 500px;
  background: url(../../assets/homepage1/bugbg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  .left_content {
    width: 500px;

    .right1_list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      height: 166px;
      align-items: center;
      letter-spacing: normal;

      .buglist_item {
        position: relative;
        width: 135px;
        height: 70px;
        background: url(../../assets/homepage1/checkbug.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        cursor: pointer;

        .ttl {
          width: 58px;
          height: 36px;
          position: absolute;
          left: 74px;
          top: 17px;
          color: #00ffff;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }

        .pic {
          width: 55px;
          height: 55px;
          border-radius: 100%;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 8px;
          top: 1px;

          img {
            width: 55px;
            height: 55px;
          }
        }
      }
    }
  }
}

.right1_box_new {
  width: 940px;
  background: url(../../assets/homepage1/right1_bg_new.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  .right1_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    height: 732px;
    align-items: center;
    letter-spacing: normal;

    .echart_item {
      width: 450px;
      height: 235px;

      .echart_item_title {
        width: 450px;
        height: 35px;
        background: url(../../assets/homepage1/echart_item_title.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        margin-bottom: 10px;
      }
    }
  }
}

.right2_box {
  width: 500px;
  background: url(../../assets/homepage1/bugbg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  .left_content {
    width: 500px;

    .right1_list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      height: 166px;
      align-items: center;
      letter-spacing: normal;

      .buglist_item {
        position: relative;
        width: 135px;
        height: 70px;
        background: url(../../assets/homepage1/checkbug.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        cursor: pointer;

        .ttl {
          width: 58px;
          height: 36px;
          position: absolute;
          left: 74px;
          top: 17px;
          color: #00ffff;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }

        .tt1sp {
          flex-direction: column;
          align-items: flex-start;
        }

        .pic {
          width: 55px;
          height: 55px;
          border-radius: 100%;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 8px;
          top: 1px;

          img {
            width: 55px;
            height: 55px;
          }
        }
      }
    }
  }
}

.right3_box {
  width: 460px;
  background: url(../../assets/homepage1/bugbg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  .left_content {
    width: 460px;

    .right1_list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      height: 226px;
      padding-left: 8px;
      margin-top: 10px;

      .buglist_item {
        position: relative;
        width: 31%;
        height: 66px;
        background: rgba(255, 255, 255, 0.1);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 1%;

        .container {
          width: 130px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;

          .name {
            text-align: left;
            width: 100%;
            font-size: 12px;
          }

          .date {
            text-align: left;
            font-size: 10px;
            color: #ddd;
          }
        }

        .container.active {
          .name,
          .date {
            color: #00ffff;
          }
        }

        img {
          position: absolute;
          right: 0px;
          height: 60px;
        }
      }
    }
  }
}

@keyframes box_show {
  from {
    transform: rotateY(90deg);
    display: none;
  }

  to {
    transform: rotateY(0deg);
    display: block;
  }
}

@keyframes box_hide {
  from {
    transform: rotateY(0deg);
    display: block;
  }

  to {
    transform: rotateY(90deg);
    display: none;
  }
}

@keyframes roll {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(-120%);
  }
}

.left_box {
  color: #04eee0;
  box-sizing: border-box;
  position: absolute;
  left: 30px;
  writing-mode: rl;
  overflow: hidden;
  transition: all ease-in-out 0.2s;
  z-index: 3;
  opacity: 1;
}

.box_animal_show {
  opacity: 1;
  animation-name: box_show;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.box_animal_hide {
  opacity: 1;
  animation-name: box_hide;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.left1_box {
  width: 350px;
  background: url(../../assets/homepage1/left1_box.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.left_box_new {
  width: 350px;
  background: url(../../assets/homepage1/left_bg_new.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.left2_box {
  width: 350px;
  background: url(../../assets/homepage1/left2_box.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.left3_box {
  width: 350px;
  background: url(../../assets/homepage1/left2_box.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  .left_content {
    width: 350px;

    .img {
      // line-height: 41px;
      text-indent: 4.5em;
      text-align: left;
      display: flex;
      flex-direction: column;
      padding-top: 6px;
    }

    .img1 {
      position: absolute;
      top: 53px;
      left: 34px;
      width: 167px;
      height: 51px;
      background: url(../../assets/homepage1/left_11.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }

    .img2 {
      position: absolute;
      top: 71px;
      right: 39px;
      width: 167px;
      height: 51px;
      text-indent: 0em;
      background: url(../../assets/homepage1/left_22.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      text-align: right;
      padding-right: 50px;
      box-sizing: border-box;
    }

    .img3 {
      position: absolute;
      bottom: 28px;
      left: 49px;
      width: 167px;
      height: 51px;
      background: url(../../assets/homepage1/left_33.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }

    .img4 {
      width: 54px;
      position: absolute;
      top: 52px;
      left: calc(50% - 27px);
    }
  }
}

.left4_box {
  width: 350px;
  background: url(../../assets/homepage1/left2_box.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

// .left_content {
//   height: 222px;
//   background-repeat: no-repeat;
//   background-position: center;
//   background-size: 100% 100%;
//   display: flex;
//   flex-direction: column;
//   justify-content: flex-start;
//   line-height: 30px;
//   color: #04eee0;
// }

.left1_title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-indent: 0.5em;
  // padding-left: 10px;
  padding-top: 20px;

  font-size: 14px;
  color: #fcff00;
  // border-bottom: 1px solid #004e84;
  line-height: 30px;

  span {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 2px;
  }

  .titlle_icon {
    width: 20px;
    margin-left: 16px;
    display: inline-block;
  }

  .titlle_icon_close {
    width: 14px;
    cursor: pointer;
    margin-left: 10px;
    display: inline-block;
  }

  .title_button {
    position: absolute;
    right: 10px;
    top: 3px;
    // margin-left: 50%;
    // height: 18px;
    // padding: 0 12px;
    font-size: 12px;
    border-radius: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .title_line {
    width: 94%;
    margin: 0 auto;
  }

  .option_title {
    position: absolute;
    right: 30px;

    span {
      color: #fff;
    }
  }
}

.left1_list {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  text-indent: 0em;
  letter-spacing: normal;

  div {
    width: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    line-height: 24px;
  }

  img {
    width: 48px;
  }
}

.left2_list {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  text-indent: 0em;
  letter-spacing: normal;
  flex-wrap: wrap;
  height: 140px;

  div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    line-height: 18px;
  }

  img {
    width: 38px;
  }
}

.left1_list_new {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  text-indent: 0em;
  letter-spacing: normal;
  flex-wrap: wrap;
  height: 140px;

  div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    line-height: 18px;
    width: 31%;
    margin-bottom: 10px;
    margin-top: 6px;
  }

  img {
    width: 50px;
  }
}

.left2_list_new {
  margin-top: 6px;
  padding: 0 2px;

  .list_title {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
    background-color: rgba(76, 173, 255, 0.2);
  }

  .list_roll {
    text-align: center;
    width: 100%;
    height: 120px;
    overflow: scroll;
  }
  .list_rolls {
    text-align: center;
    width: 100%;
    height: 310px;
    overflow: scroll;
  }
  .list_title_text {
    color: #1be9ec;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 14px;
  }

  .list_text {
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }

  .list_container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 160px;
    animation-name: roll;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .list_item {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
  }

  .list_title1 {
    width: 0px;
    height: 28px;
  }

  .list_title2 {
    width: 90px;
    height: 28px;
  }

  .list_title3 {
    width: 80px;
    height: 28px;
  }

  .list_title4 {
    width: 90px;
    height: 28px;
  }
}

.left3_list_new {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  letter-spacing: normal;
  flex-wrap: wrap;
  height: 190px;
  margin-top: 6px;

  div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 48%;
    height: 90px;
    margin-bottom: 8px;
    margin-right: 4px;
    margin-left: 4px;
  }

  img {
    width: 100%;
    height: 100%;
  }
}

.smallTitle {
  position: absolute;
  right: 500px;
  bottom: 110px;
  width: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding-left: 50px;
}

.smallTitle_item {
  width: 220px;
  height: 37px;
  background: url(../../assets/homepage1/smalltitlebg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  text-indent: 1em;
  color: #03b8ac;

  align-items: center;
  padding-left: 20px;
  margin-left: 0px;
  transition: all ease-in-out 0.5s;
  cursor: pointer;
  margin-bottom: 10px;

  img {
    width: 19px;
    height: 19px;
  }
}

.smallTitle_item.active {
  margin-left: -40px;

  span {
    color: #04eee0;
  }
}

.smallTitleDetail {
  width: 900px;
  height: 385px;
  background: url(../../assets/homepage1/smalldetail.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  top: calc(50% - 180px);
  left: calc(50% - 533px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 10px;
  margin-left: 80px;

  .smallDetail_title {
    color: #04eee0;
    text-align: left;
    text-indent: 2em;
    font-size: 20px;
  }

  .smallDetail_container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    .smallDetail_left {
      width: 216px;
      height: 300px;
      background-color: rgba(0, 13, 58, 0.5);
      padding: 10px;

      .smallDetail_left_title {
        width: 127px;
        height: 25px;
        color: #fff;
        background-color: #004e84;
        line-height: 25px;
        text-indent: 2em;
      }

      .smallDetail_left_box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .smallDetail_left_item {
          width: 198px;
          height: 32px;
          background: url(../../assets/homepage1/smalldetail_textbg.png);
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% 100%;
          line-height: 32px;
          text-indent: 2em;
          color: #fff;
          margin-top: 10px;
        }
      }
    }

    .smallDetail_right {
      width: 760px;
      height: 270px;
    }
  }
}

.smallTitle2Detail {
  width: 430px;
  height: 359px;
  background: url(../../assets/homepage1/smalldetail.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  top: calc(50% - 180px);
  left: calc(50% - 215px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 10px;

  .smallDetail_title {
    color: #04eee0;
    text-align: left;
    text-indent: 1em;
    font-size: 20px;
  }

  .smallDetail_container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    .smallDetail_left {
      width: 430px;
      height: 270px;
      padding: 10px;

      .smallDetail_left_title {
        width: 127px;
        height: 25px;
        color: #fff;
        background-color: #004e84;
        line-height: 25px;
        text-indent: 2em;
      }

      .smallDetail_left_box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .smallDetail_left_item {
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% 100%;
          line-height: 32px;
          text-indent: 1em;
          color: #fff;
          margin-top: 10px;
          border-bottom: 1px dashed #04eee0;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }

    .button_style {
      text-align: center;
    }

    .smallDetail_right {
      width: 760px;
      height: 270px;
    }
  }
}

.zzonline {
  width: 730px;
  height: 314px;
  background: url(../../assets/homepage1/zzbg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  top: calc(50% - 157px);
  left: calc(50% - 365px);

  .zzTitle {
    width: 100%;
    height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 40px;
    font-size: 14px;
    color: #67baff;
    padding-left: 20px;
    padding-right: 20px;

    .zzmiaoshu {
      font-size: 16px;
      color: #fff;

      span {
        color: #04eee0;
      }
    }
  }
}

.zzdetalList {
  width: 483px;
  height: 407px;
  background: url(../../assets/homepage1/zzdetailList.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  top: calc(50% - 203px);
  left: calc(50% - 242px);

  .title {
    color: #04eee0;
    text-align: left;
    text-indent: 1em;
    font-size: 20px;
    line-height: 40px;
  }

  .zztable {
    width: 100%;
    height: 360px;
    margin-top: 10px;
    padding: 10px;

    .tableTitle {
      display: flex;
      flex-direction: row;
      color: #04eee0;
      font-size: 16px;
      border-bottom: 1px solid #48a7f6;
      line-height: 49px;

      .table1 {
        width: 45%;
        height: 49px;
      }

      .table2 {
        width: 20%;
        height: 49px;
      }

      .table3 {
        width: 35%;
        height: 49px;
      }
    }

    .tableItem {
      display: flex;
      flex-direction: row;
      color: #fff;
      font-size: 16px;
      border-bottom: 1px solid #48a7f6;
      line-height: 49px;
      cursor: pointer;

      .table1 {
        width: 45%;
        height: 49px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .table2 {
        width: 20%;
        height: 49px;
      }

      .table3 {
        width: 35%;
        height: 49px;
      }
    }
  }
}

.zzdetalList_detail {
  width: 735px;
  height: 360px;
  background: url(../../assets/homepage1/askDetail.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  top: calc(50% - 180px);
  left: calc(50% - 368px);

  .title {
    color: #04eee0;
    text-align: left;
    text-indent: 1em;
    font-size: 20px;
    line-height: 40px;
  }

  .detail {
    padding-left: 20px;
    margin-top: 20px;
    color: #04eee0;
    font-size: 16px;
  }

  .detail_title {
    margin-top: 10px;
    background-color: #004e84;
    display: inline-block;
    padding: 5px 10px;
    height: 36px;
    font-size: 16px;
    color: #fff;
    line-height: 26px;
  }

  .askDetail_text {
    padding: 10px;
    margin-top: 10px;
    text-indent: 1em;
    font-size: 14px;
    color: #fff;
    max-height: 62px;
  }
}

.mListmod {
  width: 530px;
  height: 340px;
  background: url(../../assets/homepage1/mbg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  top: calc(50% - 148px);
  left: calc(50% - 215px);

  .title {
    color: #04eee0;
    text-align: left;
    text-indent: 1em;
    font-size: 20px;
  }

  .detail {
    padding-left: 20px;
    margin-top: 20px;
    color: #04eee0;
    font-size: 16px;

    .box {
      color: #fff;
      width: 497px;
      height: 143px;
      background: rgba(0, 0, 0, 0.1);

      align-items: center;

      ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        li {
          width: 49%;
          margin-top: 5px;
        }
      }
    }
  }
}

.bugList_detail {
  width: 735px;
  height: 480px;
  background: url(../../assets/homepage1/bagbg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  top: calc(50% - 240px);
  left: calc(50% - 368px);

  .title {
    color: #04eee0;
    text-align: left;
    text-indent: 1em;
    font-size: 20px;
    line-height: 40px;
  }

  .detail {
    padding-left: 20px;
    margin-top: 10px;
    color: #04eee0;
    font-size: 16px;
  }

  .detail_title {
    margin-top: 10px;
    background-color: #004e84;
    display: inline-block;
    padding: 5px 10px;
    height: 36px;
    font-size: 16px;
    color: #fff;
    line-height: 26px;
  }

  .askDetail_text {
    padding: 10px;
    text-indent: 1em;
    font-size: 14px;
    color: #fff;
    max-height: 62px;
  }

  .imgList {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-top: 20px;

    img {
      width: 147px;
      height: 100px;
      display: inline-block;
      margin-right: 5px;
    }
  }
}

.closeBtn {
  position: absolute;
  top: 14px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0);
  font-size: 14px;
  z-index: 99;
  line-height: 17px;
  border: none;
}

.closeBtn1 {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0);
  font-size: 14px;
  z-index: 99;
  line-height: 16px;
  border: none;
}

.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0;
}

.more {
  margin-top: 10px;
  margin-bottom: 6px;
  padding-left: 10px;

  input {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0);

    border: 1px solid #2cadff;
  }
}

.forInput {
  input {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0);

    border: 1px solid #2cadff;
  }
}

.bottom.active {
  height: 160px;
  background: url(../../assets/homepage1/newLastbg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.newIndex {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;

  .growBox {
    width: 1300px;
    height: 800px;
    background: url(../../assets/homepage1/growBox.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    margin: 126px auto 0;

    .hideingBtn {
      position: absolute;
      width: 20px;
      height: 20px;
      right: 30px;
      top: 27px;
      cursor: pointer;
    }

    .growBox_btnRow {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 10px;

      .rowItem {
        width: 30%;
        height: 30px;
        text-align: center;

        select {
          width: 180px;
          margin-right: 10px;
          font-size: 16px;
          height: 30px;
          border-bottom: 1px solid #1be9ec !important;
          border-radius: 0;
        }
      }
    }

    .growBox_show {
      width: 1200px;
      height: 660px;
      border: 1px solid #00ffff;
      position: relative;
      margin: 0 auto;

      #fengGeXian {
        width: 36px;
        height: 100%;
        background: url(../../assets/homepage1/fengGeXian.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        position: absolute;
        left: calc(50% - 18px);
        cursor: pointer;
      }
    }
  }
}

.zzListCointer {
  background: url(../../assets/homepage1/zzListCointer.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 680px;
  height: 500px;
  position: relative;

  .zzListCointer_box {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow-y: scroll;

    /* 滚动条优化 start */
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
  }

  .zzContainera {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .zzContainer {
    width: 30%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 10px;

    &.zzContainer_ssjk {
      width: 100%;
      height: calc(100% - 50px);
      box-sizing: border-box;
      overflow-y: scroll;

      & > .jkItem_biger {
        width: 30%;
      }
    }

    .zzContainer_item {
      width: 48%;
      height: 100px;
      border: 1px solid #004e84;
      margin-top: 20px;
      margin-right: 10px;
      display: flex;
      // -webkit-box-orient: vertical;
      // -webkit-line-clamp: 1;

      flex-direction: row;
      justify-content: space-around;
      cursor: pointer;
      align-items: center;

      .zzLeft {
        width: 80px;
        height: 80px;
        background: url(../../assets/homepage1/zzcircle.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 64px;
          height: 64px;
        }
      }

      .zzCenter {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        color: #00ffff;
        font-size: 18px;
        padding-top: 10px;
        padding-bottom: 10px;

        .dd {
          color: #5fc5ff;
          font-size: 14px;
        }
      }

      .zzRight {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        color: #5fc5ff;
        text-align: center;

        .imgbg {
          width: 104px;
          height: 70px;
          background: url(../../assets/homepage1/zzff.png);
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% 100%;
          text-align: center;
          line-height: 70px;
        }
      }
    }

    .jkItem {
      width: 100%;
      height: 136px;
      margin-top: 10px;
      margin-right: 1%;
      margin-left: 1%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      align-items: flex-start;
      justify-content: space-around;

      img {
        width: 195px;
        height: 108px;
      }
    }

    .jkItem_biger {
      width: 23%;
      height: 136px;
      margin-top: 10px;
      margin-right: 1%;
      margin-left: 1%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;

      img {
        width: 195px;
        height: 108px;
      }
    }
  }

  .slickItem {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;

    img {
      width: 23%;
      height: 96px;
      margin-right: 1%;
      margin-left: 1%;
    }
  }
}

.zzListCointer.biger {
  background: url(../../assets/homepage1/biger.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.growClass {
  width: 100px;
  height: 30px;
  border: 1px solid #1e96f9;
  border-radius: 20px;
  text-align: center;
  line-height: 28px;
  color: #fff;
}

.growActive {
  background-color: #1e96f9;
}

.zzListCointer .zzContainer .zzContainer_item.spStyle {
  height: 118px;
  margin-top: 8px;
}

.spStyle_dd {
  font-size: 12px;
  height: 40px;
  overflow: hidden;
  width: 226px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

// .spStyle_dd:hover {
//   width: 426px;
// }

.contact_new_span {
  color: #4cadff;
  font-size: 15px;
  display: inline-block;
  width: 110px;
}

.biaoti .button3:hover,
.biaoti .button3 {
  color: #d1dbff;
  padding: 0px 50px;
  line-height: 36px;
  height: 36px;
  background-image: url(../../assets/homepage1/11111.png);
  background-size: cover;
}
.ant-calendar-picker {
  width: 180px;
  margin-left: 10px;
}
.ant-btn-primary {
  margin-left: 10px;
}
.ant-input {
  color: #fff !important;
}
.beautiful_select,
.beautiful_select2 {
  border: 1px solid rgb(27, 233, 236) !important;
  border-radius: 10px;
  background: none !important;
  border: none;
  color: #1be9ec;
  outline: none;

  option {
    height: 34px;
    line-height: 34px;
    color: #000;
  }
}
.content_left_1_content {
  width: 350px;
  height: 202px;
  position: absolute;
  top: 70px;
  left: 20px;

  .contentRow {
    display: flex;
    box-sizing: border-box;
  }

  .contentRowModule {
    display: flex;
    width: 50%;
  }

  .contentRowName {
    opacity: 0.68;
    font-size: 14px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: left;
    color: #f4f9ff;
  }

  .contentRowValue {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    width: 50%;
    font-size: 14px;
    font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
    font-weight: bold;
    text-align: left;
    color: #f4f9ff;
  }

  .dkmjUnit {
    opacity: 0.68;
    font-size: 16px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: left;
    color: #f4f9ff;
  }

  .splitLine {
    width: 400px;
    border-top: 2px dashed #31678e;
    margin: 10px 0;
  }
}
.sluice_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  letter-spacing: normal;
  color: #fff;
  height: 35px;
  border-top: 2px dashed #31678e;

  .spanlist {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
}
.sluice_list_but {
  background: #009cff;
  cursor: pointer;
  padding: 2px;
  margin-left: 10px;
}
.list_roll::-webkit-scrollbar {
  width: 0px;
}
.list_rolls::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.sluice_lists {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  letter-spacing: normal;
  color: #fff;
  height: 40px;
  border-top: 2px dashed #31678e;

  .sluice_lists_but {
    background: #009cff;
    cursor: pointer;
    padding: 2px;
    margin-left: 10px;
  }
}
.legendContent {
  display: flex;
  flex-direction: row;
  justify-content: space-around;

  .legendContentModule {
    width: 90px;

    .legendIcon {
      width: 50px;
      height: 55px;
      margin: 0 auto;
    }

    .legendIconNysz {
      background: url('../../assets/images/intelligentIrrigation/fnysz.png');
      background-size: 100% 100%;
    }

    .legendIconJj {
      background: url('../../assets/images/intelligentIrrigation/fjj.png');
      background-size: 100% 100%;
    }

    .legendIconSp {
      background: url('../../assets/images/intelligentIrrigation/fsp.png');
      background-size: 100% 100%;
    }

    .legendIconSq {
      background: url('../../assets/images/intelligentIrrigation/fsq.png');
      background-size: 100% 100%;
    }

    .legendWord {
      font-size: 16px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: bold;
      text-align: center;
      color: #f4f9ff;
    }
  }
}
.content_center_top_module {
  width: 175px;
  height: 82px;
  background: url('../../assets/images/intelligentIrrigation/centerTopBg.png');
  background-size: 100% 100%;
  margin-right: 30px;
  position: relative;

  .content_center_top_module_icon {
    width: 43px;
    height: 43px;
    position: absolute;
    top: 19px;
    left: 15px;
  }
  .jyl {
    background: url('../../assets/images/intelligentIrrigation/jyl.png');
    background-size: 100% 100%;
  }
  .ggl {
    background: url('../../assets/images/intelligentIrrigation/ggl.png');
    background-size: 100% 100%;
  }
  .sw {
    background: url('../../assets/images/intelligentIrrigation/ggl.png');
    background-size: 100% 100%;
  }
  .content_center_top_module_value {
    font-size: 22px;
    font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
    font-weight: 400;
    text-align: left;
    color: #00fbff;
    position: absolute;
    top: 13px;
    left: 74px;
  }

  .content_center_top_module_name {
    font-size: 16px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: left;
    color: #ffffff;
    position: absolute;
    top: 40px;
    left: 76px;
  }
}
.content_right_zb_module_tit {
  display: flex;
  justify-content: space-around;
  font-size: 16px;
  color: #fff;
  margin-top: 10px;
}
.content_right_zb_module {
  display: flex;
  position: absolute;
  top: 132px;
  left: 15px;

  .zb_module {
    width: 110px;
    height: 82px;
    background: url('../../assets/images/intelligentIrrigation/znzmZBBg.png');
    background-size: 100% 100%;
    margin-right: 10px;
    position: relative;

    .content_right_zb_module_icon {
      width: 35px;
      height: 35px;
      position: absolute;
      top: 19px;
      left: 5px;
    }

    .zqsw {
      background: url('../../assets/images/intelligentIrrigation/zqsw.png');
      background-size: 100% 100%;
    }

    .zhsw {
      background: url('../../assets/images/intelligentIrrigation/zhsw.png');
      background-size: 100% 100%;
    }

    .ll {
      background: url('../../assets/images/intelligentIrrigation/ll.png');
      background-size: 100% 100%;
    }

    .content_right_zb_module_value {
      font-size: 18px;
      font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
      font-weight: 400;
      text-align: left;
      color: #00fbff;
      position: absolute;
      top: 10px;
      left: 50px;
    }

    .content_right_zb_module_name {
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: left;
      color: #ffffff;
      position: absolute;
      top: 35px;
      left: 50px;
    }
  }
}
.content_right_bottom_module {
  width: 500px;
  height: 118px;
  position: absolute;
  top: 350px;
  left: 15px;
  display: flex;

  .content_right_bottom_module_icon {
    width: 100px;
    height: 100px;
    background: url('../../assets/images/intelligentIrrigation/rightBottomIcon.png');
    background-size: 100% 100%;
  }

  .content_right_bottom_module_content {
    width: 80%;
    .sluiceNoModule {
      display: flex;
      margin-bottom: 10px;

      .sluiceNoModuleName {
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: bold;
        text-align: center;
        color: #ffffff;
      }

      .sluiceNoModuleValue {
        font-size: 16px;
        font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
      }
    }

    .sbModule {
      display: flex;
      margin-bottom: 14px;

      .sbztModule {
        display: flex;
        width: 200px;

        .sbztModuleName,
        .sbztModuleValue {
          font-size: 16px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: bold;
          text-align: center;
          color: #ffffff;
          margin-left: 4px;
        }
      }

      .sbgzModule {
        display: flex;
        width: 200px;

        .sbgzModuleName,
        .sbgzModuleValue {
          font-size: 16px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: bold;
          text-align: center;
          color: #ffffff;
          margin-left: 4px;
        }
      }
    }

    .content_right_bottom_module_button {
      display: flex;
      width: 90%;

      .button_qd {
        width: 94px;
        height: 40px;
        background: #009cff;
        border-radius: 4px;
        margin-right: 20px;
        display: flex;
        cursor: pointer;

        .button_qd_icon {
          width: 15px;
          height: 20px;
          background: url('../../assets/images/intelligentIrrigation/qdIcon.png');
          background-size: 100% 100%;
          margin: 10px;
        }

        .button_qd_name {
          font-size: 16px;
          font-family: Microsoft YaHei, Microsoft YaHei-Bold;
          font-weight: 700;
          text-align: center;
          color: #ffffff;
          line-height: 40px;
        }
      }

      .button_jt {
        width: 94px;
        height: 40px;
        background: #e22649;
        border-radius: 4px;
        margin-right: 20px;
        display: flex;
        cursor: pointer;

        .button_jt_icon {
          width: 16px;
          height: 16px;
          background: url('../../assets/images/intelligentIrrigation/jtIcon.png');
          background-size: 100% 100%;
          margin: 13px 13px 10px 10px;
        }

        .button_jt_name {
          font-size: 16px;
          font-family: Microsoft YaHei, Microsoft YaHei-Bold;
          font-weight: 700;
          text-align: center;
          color: #ffffff;
          line-height: 40px;
        }
      }

      .button_zdkz {
        width: 94px;
        height: 40px;
        background: #00d491;
        border-radius: 4px;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 700;
        text-align: center;
        color: #ffffff;
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }

      .button_gbfm {
        width: 94px;
        height: 40px;
        background: #55aaff;
        border-radius: 4px;
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 700;
        text-align: center;
        color: #ffffff;
        line-height: 40px;
        cursor: pointer;
      }
    }
  }
}
.content_right_control_module {
  display: flex;
  position: absolute;
  top: 500px;
  left: 100px;

  .control_module {
    margin-right: 12px;
    cursor: pointer;

    .control_icon {
      width: 88px;
      height: 63px;
    }

    .yckz_icon {
      background: url('../../assets/images/intelligentIrrigation/yckz.png');
      background-size: 100% 100%;
    }

    .yckz_icon_active {
      background: url('../../assets/images/intelligentIrrigation/yckzActive.png');
      background-size: 100% 100%;
    }

    .xsmx_icon {
      background: url('../../assets/images/intelligentIrrigation/xsmx.png');
      background-size: 100% 100%;
    }

    .xsmx_icon_active {
      background: url('../../assets/images/intelligentIrrigation/xsmxActive.png');
      background-size: 100% 100%;
    }

    .gjgl_icon {
      background: url('../../assets/images/intelligentIrrigation/gjgl.png');
      background-size: 100% 100%;
    }

    .gjgl_icon_active {
      background: url('../../assets/images/intelligentIrrigation/gjglActive.png');
      background-size: 100% 100%;
    }

    .lssj_icon {
      background: url('../../assets/images/intelligentIrrigation/lssj.png');
      background-size: 100% 100%;
    }

    .lssj_icon_active {
      background: url('../../assets/images/intelligentIrrigation/lssjActive.png');
      background-size: 100% 100%;
    }

    .czjl_icon {
      background: url('../../assets/images/intelligentIrrigation/czjl.png');
      background-size: 100% 100%;
    }

    .czjl_icon_active {
      background: url('../../assets/images/intelligentIrrigation/czjlActive.png');
      background-size: 100% 100%;
    }

    .whjl_icon {
      background: url('../../assets/images/intelligentIrrigation/whjl.png');
      background-size: 100% 100%;
    }

    .whjl_icon_active {
      background: url('../../assets/images/intelligentIrrigation/whjlActive.png');
      background-size: 100% 100%;
    }

    .control_name {
      font-size: 18px;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-weight: 700;
      text-align: center;
      color: #eef8ff;
      line-height: 48px;
    }

    .control_name_active {
      font-size: 18px;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-weight: 700;
      text-align: center;
      color: #00fbff;
      line-height: 48px;
    }
  }
}
.sluiceLoading {
    position: fixed;
    top: 200px;
    left: 800px;
}
</style>
<style>
  .zzonline_modal .ant-modal-content {
    background: none !important;
  }
</style>